<template>
	<view class="announcements-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-left" @tap="goBack">
				<text class="back-icon">‹</text>
			</view>
			<view class="header-center">
				<text class="header-title">班级公告</text>
			</view>
			<view class="header-right">
				<uni-icons type="plus" size="18" color="#fff" @tap="showPublishModal"></uni-icons>
			</view>
		</view>

		<!-- 公告列表 -->
		<scroll-view class="announcements-list" scroll-y="true">
			<view 
				v-for="(announcement, index) in announcements" 
				:key="index" 
				class="announcement-item"
				@tap="showAnnouncementDetail(announcement)"
			>
				<view class="announcement-header">
					<view class="announcement-title">
						<uni-icons type="notification" size="16" color="#007AFF"></uni-icons>
						<text class="title-text">{{ announcement.title }}</text>
						<view v-if="announcement.isImportant" class="important-badge">
							<text class="badge-text">重要</text>
						</view>
					</view>
					<text class="announcement-time">{{ announcement.time }}</text>
				</view>
				<view class="announcement-content">
					<text class="content-text">{{ announcement.content }}</text>
				</view>
				<view class="announcement-footer">
					<text class="publisher">发布者：{{ announcement.publisher }}</text>
					<view class="stats">
						<text class="stat-item">已读 {{ announcement.readCount }}</text>
						<text class="stat-item">未读 {{ announcement.unreadCount }}</text>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 发布公告弹窗 -->
		<view v-if="showPublish" class="modal-overlay" @tap="closePublishModal">
			<view class="modal-content" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">发布公告</text>
					<uni-icons type="close" size="20" color="#999" @tap="closePublishModal"></uni-icons>
				</view>
				<view class="modal-body">
					<view class="input-group">
						<text class="input-label">公告标题</text>
						<input 
							class="input-field" 
							v-model="newAnnouncement.title" 
							placeholder="请输入公告标题"
						/>
					</view>
					<view class="input-group">
						<text class="input-label">公告内容</text>
						<textarea 
							class="textarea-field" 
							v-model="newAnnouncement.content" 
							placeholder="请输入公告内容"
							:maxlength="500"
						></textarea>
						<text class="char-count">{{ newAnnouncement.content.length }}/500</text>
					</view>
					<view class="checkbox-group">
						<view class="checkbox-item" @tap="toggleImportant">
							<uni-icons 
								:type="newAnnouncement.isImportant ? 'checkbox-filled' : 'checkbox'" 
								size="20" 
								:color="newAnnouncement.isImportant ? '#007AFF' : '#999'"
							></uni-icons>
							<text class="checkbox-text">标记为重要公告</text>
						</view>
					</view>
				</view>
				<view class="modal-footer">
					<view class="modal-btn cancel-btn" @tap="closePublishModal">
						<text class="btn-text">取消</text>
					</view>
					<view class="modal-btn confirm-btn" @tap="publishAnnouncement">
						<text class="btn-text">发布</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted } from 'vue';

	// 公告列表
	const announcements = ref([
		{
			id: 1,
			title: '期末考试安排通知',
			content: '各位同学，期末考试将于下周一开始，请做好准备。考试时间为上午9:00-11:00，地点在教学楼A101。',
			publisher: '张教授',
			time: '2024-01-15 14:30',
			isImportant: true,
			readCount: 35,
			unreadCount: 10
		},
		{
			id: 2,
			title: '作业提交截止时间',
			content: '本周作业请在周五晚上12点前提交，逾期将扣除相应分数。',
			publisher: '李老师',
			time: '2024-01-14 16:20',
			isImportant: false,
			readCount: 42,
			unreadCount: 3
		},
		{
			id: 3,
			title: '课程调整通知',
			content: '由于老师临时有事，本周三的课程调整到周四同一时间。',
			publisher: '张教授',
			time: '2024-01-13 09:15',
			isImportant: false,
			readCount: 40,
			unreadCount: 5
		}
	]);

	// 发布公告相关
	const showPublish = ref(false);
	const newAnnouncement = ref({
		title: '',
		content: '',
		isImportant: false
	});

	// 返回上一页
	const goBack = () => {
		uni.navigateBack({
			fail: () => {
				// 如果返回失败，跳转到班级页面
				uni.navigateTo({
					url: '/pages/class/class'
				});
			}
		});
	};

	// 显示发布公告弹窗
	const showPublishModal = () => {
		showPublish.value = true;
	};

	// 关闭发布公告弹窗
	const closePublishModal = () => {
		showPublish.value = false;
		newAnnouncement.value = {
			title: '',
			content: '',
			isImportant: false
		};
	};

	// 切换重要标记
	const toggleImportant = () => {
		newAnnouncement.value.isImportant = !newAnnouncement.value.isImportant;
	};

	// 发布公告
	const publishAnnouncement = () => {
		if (!newAnnouncement.value.title.trim()) {
			uni.showToast({
				title: '请输入公告标题',
				icon: 'none'
			});
			return;
		}

		if (!newAnnouncement.value.content.trim()) {
			uni.showToast({
				title: '请输入公告内容',
				icon: 'none'
			});
			return;
		}

		// 创建新公告
		const announcement = {
			id: announcements.value.length + 1,
			title: newAnnouncement.value.title,
			content: newAnnouncement.value.content,
			publisher: '我',
			time: new Date().toLocaleString('zh-CN'),
			isImportant: newAnnouncement.value.isImportant,
			readCount: 0,
			unreadCount: 45
		};

		// 添加到列表开头
		announcements.value.unshift(announcement);

		uni.showToast({
			title: '发布成功',
			icon: 'success'
		});

		closePublishModal();
	};

	// 显示公告详情
	const showAnnouncementDetail = (announcement: any) => {
		uni.showModal({
			title: announcement.title,
			content: announcement.content,
			showCancel: false,
			confirmText: '确定'
		});
	};

	onMounted(() => {
		// 可以在这里加载公告数据
		// BACKEND REQUIRED: GET /api/class/{classId}/announcements
	});
</script>

<style>
	page {
		background-color: #f5f5f5;
	}

	.announcements-container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 顶部导航栏 */
	.header {
		background: linear-gradient(135deg, #007AFF, #5856D6);
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.header-left {
		display: flex;
		align-items: center;
		padding: 10rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 50%;
		min-width: 60rpx;
		min-height: 60rpx;
		justify-content: center;
	}

	.back-icon {
		font-size: 36rpx;
		color: #fff;
		font-weight: bold;
		line-height: 1;
	}

	.header-center {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.header-title {
		font-size: 18px;
		font-weight: 600;
		color: #fff;
	}

	.header-right {
		padding: 10rpx;
	}

	/* 公告列表 */
	.announcements-list {
		padding: 20rpx;
	}

	.announcement-item {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.announcement-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}

	.announcement-title {
		display: flex;
		align-items: center;
		gap: 10rpx;
		flex: 1;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.important-badge {
		background: #FF3B30;
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
		margin-left: 10rpx;
	}

	.badge-text {
		font-size: 20rpx;
		color: #fff;
	}

	.announcement-time {
		font-size: 24rpx;
		color: #999;
	}

	.announcement-content {
		margin-bottom: 20rpx;
	}

	.content-text {
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
	}

	.announcement-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 20rpx;
		border-top: 1rpx solid #f0f0f0;
	}

	.publisher {
		font-size: 24rpx;
		color: #999;
	}

	.stats {
		display: flex;
		gap: 20rpx;
	}

	.stat-item {
		font-size: 24rpx;
		color: #007AFF;
	}

	/* 弹窗样式 */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.modal-content {
		background: #fff;
		border-radius: 16rpx;
		width: 90%;
		max-width: 600rpx;
		max-height: 80vh;
	}

	.modal-header {
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.modal-body {
		padding: 30rpx;
		max-height: 60vh;
		overflow-y: auto;
	}

	.input-group {
		margin-bottom: 30rpx;
	}

	.input-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 12rpx;
		display: block;
	}

	.input-field {
		width: 100%;
		padding: 20rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		font-size: 28rpx;
		background: #f9f9f9;
	}

	.textarea-field {
		width: 100%;
		padding: 20rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		font-size: 28rpx;
		background: #f9f9f9;
		min-height: 200rpx;
		resize: none;
	}

	.char-count {
		font-size: 24rpx;
		color: #999;
		text-align: right;
		margin-top: 10rpx;
	}

	.checkbox-group {
		margin-top: 20rpx;
	}

	.checkbox-item {
		display: flex;
		align-items: center;
		gap: 10rpx;
		padding: 10rpx 0;
	}

	.checkbox-text {
		font-size: 28rpx;
		color: #333;
	}

	.modal-footer {
		padding: 30rpx;
		border-top: 1rpx solid #f0f0f0;
		display: flex;
		gap: 20rpx;
	}

	.modal-btn {
		flex: 1;
		padding: 20rpx;
		border-radius: 8rpx;
		text-align: center;
	}

	.cancel-btn {
		background: #f0f0f0;
	}

	.confirm-btn {
		background: #007AFF;
	}

	.btn-text {
		font-size: 28rpx;
		color: #333;
	}

	.confirm-btn .btn-text {
		color: #fff;
	}
</style>
